<html>
<head>
    <title>风险责任清单</title>
    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .main-head {
            background: #fff;
            padding-left: 10px;
            padding-top: 10px;
            margin-bottom: 0px;
            border: solid 1px #fff;
        }

        .chart-outer {
            height: 200px;
        }

        img {
            width: 30px;
            width: 32px;
        }

        td {
            text-align: center;
            height: 50px; /*这里需要自己调整，根据自己的需求调整高度*/
            position: relative;
        }

        td[class=first] {
            width: 100px;
        }

        td[class=first]:before {
            content: "";
            position: absolute;
            width: 1px;
            height: 160px;
            top: 0;
            left: 0;
            background-color: #000;
            display: block;
            transform: rotate(-73deg);
            transform-origin: top;
            -ms-transform: rotate(-73deg);
            -ms-transform-origin: top;
        }

        .title1 {
            position: absolute;
            top: 0px;
            right: 0px;
        }

        .title2 {
            position: absolute;
            top: 26px;
            right: 70px;
        }

        .el-dialog {
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 0 !important;
            transform: translate(-50%, -50%);
            display: flex;
            flex-direction: column;
            max-height: calc(100% - 30px);
            width: 100%;
            /*max-width: calc(100% - 30px);*/
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">公告,公告</div>
    <div class="page-main">
        <div class="main-head">
            <el-form :inline="true" size="small" :model="searchForm">
                <el-form-item label="标题">
                    <el-input placeholder="标题" style="width: 150px;" v-model="bbsTitle"></el-input>
                </el-form-item>
                <el-form-item label="日期时间" prop="startTime">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="开始时间" v-model="startTime"
                                        value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="结束时间" v-model="endTime"
                                        value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="btnSearch">查询</el-button>
                    <el-button type="success" @click="btnAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" :stripe="true" :border="true" size="mini" style="width: 100%">
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="bbsTitle" label="标题" align="center"></el-table-column>
            <el-table-column prop="bbsContent" label="公告内容" align="center"></el-table-column>
            <el-table-column prop="startTime" label="开始时间" align="center">
                <template slot-scope="scope" v-if="scope.row.startTime">
                    <el-tag size="medium">{{scope.row.startTime.replace("T"," ").substr(0,10)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="endTime" label="结束时间" align="center">
                <template slot-scope="scope" v-if="scope.row.endTime">
                    <el-tag size="medium">{{scope.row.endTime.replace("T"," ").substr(0,10)}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="280">
                <template slot-scope="scope">
                    <!--<el-button @click="showDetail(scope.row.trainingId)" round size="mini" icon="el-icon-search"-->
                    <!--type="primary">详情-->
                    <!--</el-button>-->
                    <el-button round icon="el-icon-setting" size="mini"
                               @click="handleEdit(scope.row.BbsId)" type="info">编辑
                    </el-button>
                    <el-button @click="delPlan(scope.row.Id)" round size="mini" icon="el-icon-delete"
                               type="danger">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="page-footer">
            <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                           :current-page.sync="pageno" @current-change="onChangePage">
            </el-pagination>
        </div>
    </div>

    <el-dialog :title="editMod?'编辑':'添加'" :visible.sync="addVisible" :show-close="false">
        <el-row>
            <el-col :span="8">
                <el-form ref="form" :model="form" label-width="120px">
                    <el-form-item label="公告标题" prop="bbsTitle" :rules="[
                             {required:true,message:'公告标题不能为空!',trigger:'blur'}]">
                        <el-input v-model="form.bbsTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="公告内容" prop="bbsContent" :rules="[
                             {required:true,message:'公告内容!',trigger:'blur'}]">
                        <el-input v-model="form.bbsContent" ></el-input>
                    </el-form-item>
                    <el-form-item label="起止日期" prop="startTime" :rules="[
                             {required:true,message:'起止日期!',trigger:'blur'}]">
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="开始日期" v-model="form.startTime"
                                            value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                        </el-col>
                        <el-col class="line" :span="2">-</el-col>
                        <el-col :span="11">
                            <el-date-picker type="date" placeholder="结束日期" v-model="form.endTime"
                                            value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="10">
                <el-divider content-position="right">
                    <el-button type="primary" icon="el-icon-plus" size="small" @click="projectCheck">添加企业</el-button>
                </el-divider>
                <table width="100%" cellspacing="1" border="1">
                    <tr>
                        <th>企业名称</th>
                        <th>联系方式</th>
                        <th>省</th>
                        <th>市</th>
                        <th>区</th>
                        <th>地址</th>
                        <th>操作</th>
                    </tr>
                    <template v-if="projectDatas">
                        <tr v-for="(item,i) in projectDatas" style="font-size: 12px">
                            <td>{{item.projectName}}</td>
                            <td>{{item.phone}}</td>
                            <td>{{item.province}}</td>
                            <td>{{item.city}}</td>
                            <td>{{item.zone}}</td>
                            <td>{{item.address}}</td>
                            <td>
                                <el-button @click="del_projectDatas(i)" type="primary" size="mini">删除</el-button>
                            </td>
                        </tr>
                    </template>
                </table>
            </el-col>
        </el-row>


        <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible=false">取消</el-button>
            <el-button @click="plan_submit">确定</el-button>
        </div>
    </el-dialog>

    <el-dialog title="检查企业" :visible.sync="projectVisible" :show-close="false" width="50%">
        <el-form :inline="true" size="small" :model="searchForm">

            <el-form-item label="省份">
                <el-input placeholder="省份" style="width: 150px;" v-model="province"></el-input>
            </el-form-item>
            <el-form-item label="城市">
                <el-input placeholder="城市" style="width: 150px;" v-model="city"></el-input>
            </el-form-item>
            <el-form-item label="区域">
                <el-input placeholder="区域" style="width: 150px;" v-model="zone"></el-input>
            </el-form-item>
            <el-form-item label="企业名称">
                <el-input placeholder="企业名称" style="width: 150px;" v-model="projectName"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="projectSearch">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="ProjectData" :stripe="true" :border="true" size="mini"
                  ref="multipleTable"
                  tooltip-effect="dark"
                  style="width: 100%"
                  @selection-change="projectChange" append-to-body>
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
            <el-table-column prop="projectName" label="企业名称" align="center"></el-table-column>
            <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
            <el-table-column prop="province" label="省" align="center"></el-table-column>
            <el-table-column prop="city" label="市" align="center"></el-table-column>
            <el-table-column prop="zone" label="区" align="center"></el-table-column>
            <el-table-column prop="address" label="地址" align="center"></el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="projectVisible=false">取消</el-button>
            <el-button @click="projectVisible=false">确定</el-button>
        </div>
    </el-dialog>
</div>

<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            tableData: [],
            searchForm: {
                pagesize: 10,
                totalCount: 10,
                pageno: 1,
                UserId: SiteConfig.account.id,
                trainFlag: ''
            },
            editMod: false,
            addVisible: false,
            innerVisible: false,

            checkVisible: false,
            userVisible: false,
            projectVisible: false,
            form: {},
            sel_user: [],
            multipleSelection: [],
            child: [],
            departMent: [],
            file_list: '',
            userDetail: [],
            DangerousData: [
                {Name: '直接选择或搜索选择', Id: 0},
                {Name: '重点检查', Id: 1},
                {Name: '一般检查', Id: 2},
                {Name: '专项检查', Id: 3}
            ],
            planName: '',
            planType: '',
            pagesize: 10,
            totalCount: 0,
            pageno: 1,
            PlanData: [],
            userData: [],
            ProjectData: [],
            DepartmentData: [],
            checkDatas: [],
            projectDatas: [],
            userDatas: [],
            projectName: '',
            province: '',
            city: '',
            zone: '',
            bbsTitle:'',
            startTime:'',
            endTime:''

        },
        methods: {
            projectSearch: function () {
                this.projectList();
            },
            btnSearch: function () {
                this.getTrain();
            },
            onChangePage(page) {
                this.pageno = page;
                this.getTrain();
            },
            btnAdd() {
                this.addVisible = true;
                this.form = {};
                this.sel_user = {};
                this.editMod = false;
            },
            showUser() {
                this.innerVisible = true;
            },
            del_checkDatas(index) {
                this.checkDatas.splice(index, 1);
            },
            del_projectDatas(index) {
                this.projectDatas.splice(index, 1);
            },
            del_userDatas(index) {
                this.userDatas.splice(index, 1);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            checkCheck() {
                this.checkVisible = true;
            },
            userCheck() {
                this.userVisible = true;
            },
            projectCheck() {
                this.projectVisible = true;
            },
            projectChange(val) {
                this.projectDatas = val;
                console.log(this.projectDatas)
            },
            userChange(val) {
                this.userDatas = val;
                console.log(this.userDatas)
            },
            checkChange(val) {
                this.checkDatas = val;
                console.log(this.checkData)
            },

            filterTag(value, row) {
                return row.attributes.departmentId === value;
            },
            plan_submit() {
                if (!this.form.bbsTitle) {
                    this.$message({type: 'error', message: '公告标题不能为空'})
                    return;
                }
                if (!this.form.bbsContent) {
                    this.$message({type: 'error', message: '公告内容不能为空'})
                    return;
                }
                if (!this.form.startTime) {
                    this.$message({type: 'error', message: '开始时间不能为空'})
                    return;
                }
                if (!this.form.endTime) {
                    this.$message({type: 'error', message: '结束时间不能为空'})
                    return;
                }

                var oDate1 = new Date(this.form.startTime);
                var oDate2 = new Date(this.form.endTime);
                if (oDate1.getTime() > oDate2.getTime()) {
                    this.$message({type: 'error', message: '开始时间不能大于结束时间'})
                    return;
                }
                if (this.projectDatas <= 0) {
                    this.$message({type: 'error', message: '请选择企业！'});
                    return;
                }

                let  projects = [];
                try {
                    for (let temp of this.projectDatas) {
                        projects.push(temp.projectNo);
                    }
                } catch (e) {
                    this.$message({type: 'error', message: e});
                }
                this.form.companys = projects.join(',');
                this.form.UserId = SiteConfig.account.id;
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        if (!this.editMod) {
                            HttpUtil.get('GovernmentBbs/BbsAdd', this.form).success((r) => {
                                if (r.state == 0) {
                                    this.$message.success('添加成功');
                                    this.addVisible = false;
                                    this.getTrain();
                                } else {
                                    this.$message.warning('添加失败');
                                }
                            })
                        } else {
                            HttpUtil.get('GovernmentBbs/BbsUpdate', this.form).success((r) => {
                                if (r.state == 0) {
                                    this.$message.success('保存成功');
                                    this.addVisible = false;
                                    this.getTrain();

                                } else {
                                    this.$message.warning('修改失败');
                                }
                            })
                        }
                    }
                })
            },
            delPlan(id) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    HttpUtil.get('GovernmentBbs/BbsDelete', {Id: id}).success((r) => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getTrain();
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            showDetail(id) {
                this.detailVisible = true;
                this.getDetail(id);
            },
            handleEdit(BbsId) {
                HttpUtil.get('GovernmentBbs/BbsList', {
                    BbsId: BbsId,
                    UserId: SiteConfig.account.id
                }).success((r) => {
                    if (r.state == 0) {
                        this.form = {
                            Id: r.data[0].bbsdata[0].Id,
                            BbsId: r.data[0].bbsdata[0].BbsId,
                            bbsTitle: r.data[0].bbsdata[0].bbsTitle,
                            bbsContent: r.data[0].bbsdata[0].bbsContent,
                            startTime: r.data[0].bbsdata[0].startTime,
                            endTime: r.data[0].bbsdata[0].endTime,
                            fileIds: [],
                            UserId: r.data[0].bbsdata[0].UserId,
                        };
                        vuePage.projectDatas = r.data[1].companyDatas;
                        this.addVisible = true;
                        this.editMod = true;
                    }
                    else {
                        this.$message({
                            type: 'error',
                            message: r.errMsg
                        })
                    }

                })
            },
            getTrain() {
                var param = {};
                if (this.bbsTitle)
                    param.bbsTitle = this.bbsTitle;
                if (this.startTime)
                    param.startTime = this.startTime;
                if (this.endTime)
                    param.endTime = this.endTime;

                param.UserId = SiteConfig.account.id;
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                HttpUtil.get('GovernmentBbs/BbsList', param).success((res) => {
                    var PlanList = res.data;
                    this.totalCount = res.total;
                    var DangerousData = this.DangerousData;
                    for (var i = 0; i < PlanList.length; i++) {
                        for (var j = 0; j < DangerousData.length; j++) {
                            if (PlanList[i].planType == DangerousData[j].Id) {
                                PlanList[i].planTypeName = DangerousData[j].Name;
                            }
                        }
                    }
                    this.tableData = PlanList;
                })
            },
            getFile() {
                HttpUtil.get('Training/FileList', {UserId: SiteConfig.account.id}).success((r) => {
                    this.file_list = r.data;
                })
            },
            getDetail(id) {
                HttpUtil.get('Training/PeopleDetail', {trainingId: id}).success((r) => {
                    this.userDetail = r.data;
                })
            },
            projectList() {
                var param = {};

                if (this.projectName)
                    param.projectName = this.projectName;
                if (this.province)
                    param.province = this.province;
                if (this.city)
                    param.city = this.city;
                if (this.zone)
                    param.zone = this.zone;
                param.UserId = SiteConfig.account.id;
                param.pageno = 1;
                param.pagesize = 1000;
                HttpUtil.get('Project/List', param).success((res) => {
                    vuePage.ProjectData = res.data;
                });
            }
        },
        created: function () {
            this.getTrain();
            this.projectList();
        },
        mounted: function () {
        }
    });


</script>

</body>
</html>
